<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="height=device-height, initial-scale=1.0">
     <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <title>高德地图交互小设计项目</title>
    <!-- 引入默认css文件 -->
    <link rel="stylesheet" href="./base.css">
  <!-- 引入bootstrap框架 -->
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
 
  <!-- 引入高德地图的js文件 -->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "09d850598b17731ca652cd6eba55ad2b"
    };
  </script>
</head>
<style>
html, body {
  height: 100%;
}
/* 标题区域 */
.contain{
  height: 100%;
  width: 100%;
  /* background-color: pink; */
}
.contain .nav{
  height: 9%;
  color: green;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 地图区域 */
.contain #map-container{
  height: 70%;
}
.contain .controller{
/* background-color: pink; */
height: 40%;
display: flex;
/* align-items: center; */
justify-content: center;
text-align: center;
border: 2px solid gold;
}
.contain .controller .box1{
/* background-color: yellow; */
width: 40%;
}
.contain .controller .box1 .title{
color: green;
height: 15%;
font-size: 30px;
font-weight: bolder;
}
.contain .controller .box1 .one{
  /* background-color: pink; */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid gold;
height: 85%;
}
.contain .controller .box1 .one .buttonzone{
background-color: yellow;
height: 80%;
width: 90%;
border: 2px solid gold;
}
.contain .controller .box2{

width: 40%;
}
.contain .controller .box2 .title{
color:green;
height: 15%;
font-size: 30px;
font-weight: bolder;
}
.contain .controller .box2 .two{
  /* background-color:  palegoldenrod; */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid gold;
height: 85%;
}
.contain .controller .box2 .two #show{
  /* background-color: yellow; */
  border: 2px solid gold;
height: 80%;
width: 90%;
font-size: 30px;
color: green;
display: flex;
  align-items: center;
  justify-content: center;
}
button.list-group-item{
  text-align: center;
  font-weight: bold;
}
</style>
<body>
  <!-- //<button type="button" class="btn btn-default">Left</button> -->
  <div class="contain">

 <div id="map-container"></div>
 <div class="nav"><strong>仲恺农业工程学院海珠区</strong></div>
 <div class="controller">
  <div class="box1"><div class="title">控制台</div>
<div class="one">
  <div class="buttonzone">
    <div class="list-group">
    <button type="button" class="list-group-item">点击</button>
    <button type="button" class="list-group-item" onclick="displayContent(1)">海珠区当前日期</button>
    <button type="button" class="list-group-item" onclick="displayContent(2)">海珠区当天日出时间</button>
    <button type="button" class="list-group-item" onclick="displayContent(3)">海珠区当天天气</button>
    <button type="button" class="list-group-item" onclick="displayContent(4)">当天最高温度</button>
    <button type="button" class="list-group-item" onclick="displayContent(5)">当天最低温度</button>
  </div></div>
</div></div>
  <div class="box2"><div class="title">显示区</div>
  <div class="two"><div id="show">屏幕区</div></div></div>
 </div>
  </div>

<!-- 天气api连接 -->
<script>
function displayContent(e) {
  const xhr = new XMLHttpRequest();
const url = "https://devapi.qweather.com/v7/weather/3d?location=101280101&key=bd2aa69f7b734bd2837cf7cb7125669b";
xhr.open("GET", url);
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
    console.log(response.daily[0].fxDate);

    switch(e){
      //显示日期
    case 1: 
    var content = response.daily[0].fxDate;
    console.log(content);
     var outputBox = document.getElementById("show");
  outputBox.innerHTML = content;
 
   break;
  //  显示日出时间
    case 2:   
    var content = response.daily[0].sunrise;
    console.log(content);
     var outputBox = document.getElementById("show");
  outputBox.innerHTML = content;
   break;
  //  海珠区当天天气
    case 3:  
    var content = response.daily[0].textDay;
    console.log(content);
     var outputBox = document.getElementById("show");
  outputBox.innerHTML = content;
     break;
    case 4: 
    // 当天最高问题
    var content = response.daily[0].tempMax;
    console.log(content);
     var outputBox = document.getElementById("show");
  outputBox.innerHTML = content;
    break;
    case 5: 
    // 当天最低温度
    var content = response.daily[0].tempMin;
    console.log(content);
     var outputBox = document.getElementById("show");
  outputBox.innerHTML = content;
      break;
  }
  } else {
    console.log("Request failed. Status code: " + xhr.status);
  }
};
xhr.send(); 


}
</script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script type="text/javascript">
    AMapLoader.load({
      key: "8e1a4f01233125f53a04c2dae5316b87", //申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })  
    .then((AMap) => {
      const map = new AMap.Map('map-container', {
        viewMode: '2D',  // 默认使用 2D 模式
        zoom:16,  //初始化地图层级
         center: [113.280441, 23.107883],  //初始化地图中心点
        mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        // layers:[layer],   // layer为你通过 new AMap.createDefaultLayer() 创建的默认图层
      });
      // 添加地图控件
      AMap.plugin(['AMap.ControlBar'], function() {
        var controlBar = new AMap.ControlBar();
        map.addControl(controlBar);
      });
    
//  创建多个标记点
var positions = [
  [113.280441, 23.107883],
  [113.278641, 23.106853],
  [113.279254, 23.112554],
  [113.375895, 22.522037],
  [113.27505, 23.15633]
];
positions.forEach(function(pos) {
  var marker = new AMap.Marker({
    position: pos
  });
  map.add(marker);
});
//多个经纬度添加文本
// 存储文本标记信息的对象
var textData = [
  {
    text: "仲恺农业工程学院海珠校区",
    position: [113.280441, 23.107883]
  },
  {
    text: "广东省农业展览馆生活小区",
    position: [113.278641, 23.106853]
  }
  ,
  {
    text: "江湾大桥",
    position: [113.279254, 23.112554]
  },
  {
    text: "孙中山大元帅符纪念馆",
    position: [113.375895, 22.522037]
  }
  ,
  {
    text: "广州城市职业学院",
    position: [113.27505, 23.15633]
  }
 
];

// 循环添加文本标记
textData.forEach(function(item) {
  var text = new AMap.Text({
    text: item.text,
    position: item.position,
    offset: new AMap.Pixel(-70, -60)
  });
  map.add(text);
});
     
     //默认图层
// const layer = AMap.createDefaultLayer({ // 提示：参数值并不是API默认使用的值
//   zooms:[3,20],    //可见级别
//   visible:true,    //是否可见
//   opacity:1,       //透明度
//   zIndex:0         //叠加层级
// });
// //添加交通图层
const traffic = new AMap.TileLayer.Traffic({
  'autoRefresh': true,     //是否自动刷新，默认为false
  'interval': 180,         //刷新间隔，默认180s
});
map.add(traffic); //通过add方法添加图层

})
    .catch((e) => {
      console.error(e); //加载错误提示
    });
  </script>
</body>
</html>